<template>
  <div class="choose">
    <div class="add"
         @click="addAction">
      <img src="../assets/2.png"
           alt="">
      <span>新增收货地址</span>
    </div>
    <div class="infor">
      <ul>
        <li v-for="(item,index) in addresscon"
            :key="index"
            @click="selcon($event,index)"
            :class="{'select':xzindex == index}">
          <i class="iconfont icon-xuanzhong"></i>
          <div class="infor">
            <div class="head">
              <span class="name">{{item.name}}</span>
              <span>{{item.sex}}</span>
              <span>{{item.phone}}</span>

              <div class="address_con">
                <span class="address">{{item.tag}}</span>
                <span class="detail">{{item.addressdetail}}</span>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import vm from '../common/bus'
export default {
  name: 'ChooseAddress',
  data: function () {
    return {
      // adds: [],
      xzindex: 0,
      addresscon: []
    }
  },
  methods: {
    addAction () {
      this.$router.push({ name: 'AddAddress' })
    },
    selcon ($event, n) {
      // console.log($event.target.innerText);
      this.xzindex = n;
      this.$router.push({ name: 'Confirm', params: { infors: $event.target.innerText } })
      // console.log(this.xzindex);
    }
  },
  created () {
    this.addresscon = vm.address
  },
}
</script>

<style lang="less">
.choose {
  background-color: white;
  .add {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    background-color: white;

    img {
      width: 24px;
      height: 24px;
    }
    span {
      font-size: 16px;
      color: #3190e8;
      margin-left: 8px;
    }
  }

  .infor {
    ul {
      .select {
        color: #4cd964;
      }
      li {
        display: flex;
        align-items: center;
        padding: 16px;
        border-bottom: 1px solid #f5f5f5;

        .iconfont {
          font-size: 18px;
          // color: #4cd964;
          margin-right: 10px;
        }

        .infor {
          .head {
            span {
              font-size: 16px;
              color: #333;
              margin-right: 7px;
            }
            .name {
              font-size: 18px;
              color: #333;
            }
          }

          .address_con {
            display: flex;
            align-items: center;
            .address {
              background-color: rgb(49, 144, 232);
              font-size: 12px;
              color: #fff;
              padding: 0 5px;
              border-radius: 5px;
              margin-right: 7px;
            }
            .detail {
              font-size: 14px;
              color: #777;
            }
          }
        }
      }
    }
  }
}
</style>